<!-- 创建学习组页面 -->

<template>
	<focus-body mode="auto" bg="#FFFFFF">
		
		<!-- 间隔 -->
		<focus-box width="750" height="20" bg="#F5F5F5"></focus-box>
		<!-- 所属项目 -->
		<u-cell-group>
			
			<!-- 所属项目 -->
			<u-cell-item
				title="所属项目"
				:title-style="cellStyle.title"
				@click="searchCheckCellClick('project')">
				<!-- 文字容器 -->
				<focus-box slot="right-icon" width="350" mode="row" justify="end" align="center">
					<!-- 有主动选择项文字 -->
					<focus-text v-if="inputInfo.project"
					size="32"
					color="#393939"
					align="right"
					weight="bold"
					lines="1"
					:text="inputInfo.project"></focus-text>
					<!-- 默认占位文字 -->
					<focus-text v-else
					size="32"
					color="#AFAFAF"
					align="right"
					text="请选择"></focus-text>
				</focus-box>
			</u-cell-item>
			
		</u-cell-group>
		
		<!-- 间隔 -->
		<focus-box width="750" height="20" bg="#F5F5F5"></focus-box>
		<!-- 工作单位 -->
		<u-cell-group>
			
			<!-- 工作单位 -->
			<u-cell-item
				:required="true"
				title="工作单位"
				:title-style="cellStyle.title"
				@click="searchCheckCellClick('company')">
				<!-- 文字容器 -->
				<focus-box slot="right-icon" width="350" mode="row" justify="end" align="center">
					<!-- 有主动选择项文字 -->
					<focus-text v-if="inputInfo.company"
					size="32"
					color="#393939"
					align="right"
					weight="bold"
					lines="1"
					:text="inputInfo.company"></focus-text>
					<!-- 默认占位文字 -->
					<focus-text v-else
					size="32"
					color="#AFAFAF"
					align="right"
					text="请选择"></focus-text>
				</focus-box>
			</u-cell-item>
			
		</u-cell-group>
		
		<!-- 间隔 -->
		<focus-box width="750" height="20" bg="#F5F5F5"></focus-box>
		<!-- 现场图片上传区域 -->
		<focus-box width="750" :padding="[34,0]" mode="col" justify="start" align="center" bg="white">
			<!-- 区域标题 -->
			<focus-box width="720" mode="row" justify="start" align="center">
				<!-- 星号 -->
				<focus-text size="32" color="error" text="*"></focus-text>
				<!-- 标题文字 -->
				<focus-text size="32" color="#3A3A3A" text="上传集体学习现场照片"></focus-text>
			</focus-box>
			<!-- 文字间隔 -->
			<focus-box width="100" height="24"></focus-box>
			<!-- 图片选择容器 -->
			<focus-box width="686" height="320" mode="col" justify="center" align="center"
			bg="#F8F8F8" radius="16" @click="imgUploadClick">
				<!-- 显示选择的图片 -->
				<focus-img v-if="inputInfo.image"
					:src="inputInfo.image"
					:size="[686,320]"
					radius="16"
					mode="space"
				></focus-img>
				<!-- 未选择图片 -->
				<block v-else>
					<!-- 提示图片 -->
					<image style="width:80rpx; height:58rpx; margin-bottom:20rpx;" src="@/pagesB/static/img/collective/imgUp.png"></image>
					<!-- 提示文字 -->
					<focus-text size="28" color="info" text="上传照片"></focus-text>
				</block>
			</focus-box>
		</focus-box>
		
		<!-- 底部确定按钮 -->
		<focus-box width="750" height="120">
			<!-- 悬浮容器 -->
			<focus-box width="750" height="120" mode="col" justify="center" align="center"
			position="fixed" left="0" bottom="0"
			bg="white" shadow="true">
				
				<!-- 确定按钮 -->
				<focus-box width="686" height="80" mode="row" justify="center" align="center"
				bg="primary" bgscheme="hover" radius="40" @click="sendBtnClick">
					<focus-text size="32" color="white" text="提交"></focus-text>
				</focus-box>
				
			</focus-box>
		</focus-box>
		
	</focus-body>
</template>

<script>
	// 通用js方法引入
	import project from '@/common/js/public/project.js';
	// 接口文件引入
	import request from '@/pagesB/common/js/request/learning.js'; // 学习类
	import request_user from '@/pagesB/common/js/request/userInfo.js'; // 用户类
	
	export default {
		
		// 页面数据
		data() {
			return {
				
				// 定时器
				timer: {
					autoBack: null, // 成功后延时返回上一页
				},
				
				// 输入信息
				inputInfo: {
					project: '', // 所在项目
					company: '', // 工作单位
					image: '', // 现场照片 (本地图片路径)
				},
				
				// cell组件样式
				cellStyle: {
					// 左边栏目文字
					title: {
						"font-size": '32rpx',
						"line-height": '45rpx',
						"color": '#3A3A3A',
					},
				},
				
				// 图片上传后信息
				imageUp: {
					id: 0, // 数据库id
					url: '', // 图片网络地址
				},
				
			}
		},
		
		// 页面加载完成
		onLoad() {
			// 获取个人信息
			this.userInfoGetReq();
		},
		
		// 页面销毁
		onUnload() {
			// 销毁定时器
			if (this.timer.autoBack) { clearTimeout(this.timer.autoBack); }
			// 如果所在项目为空
			if (this.inputInfo.project) { uni.$off('pages_learning_creat_projectCheck'); }
			// 如果工作单位为空
			if (this.inputInfo.company) { uni.$off('pages_learning_creat_companyCheck'); }
		},
		
		// 分享到聊天
		onShareAppMessage() {},
		
		// 页面事件
		methods: {
			
			// =============================================== 元素事件
			// 搜索选择类cell 点击
			searchCheckCellClick(typeC) {
				
				// 所属项目
				if (typeC == 'project')
				{
					// 进行数据选择监听
					uni.$once('pages_learning_creat_projectCheck', (objD)=>{
						// 进行项目赋值
						// this.inputInfo.project = objD.id;
						this.inputInfo.project = objD.value;
					});
					// 跳转到身份切换页面
					uni.$focus.pageJump('/pagesB/pages/myCenter/searchCheck/index', {
						type: 'project', // 所属项目修改
						from: 'learning', // 从创建学习组来
					});
				}
				
				// 工作单位
				else if (typeC == 'company')
				{
					// 进行数据选择监听
					uni.$once('pages_learning_creat_companyCheck', (objD)=>{
						// 进行项目赋值
						// this.inputInfo.company = objD.id;
						this.inputInfo.company = objD.value;
					});
					// 跳转到身份切换页面
					uni.$focus.pageJump('/pagesB/pages/myCenter/searchCheck/index', {
						type: 'company', // 工作单位修改
						from: 'learning', // 从创建学习组来
					});
				}
				
			},
			
			// 选择图片 点击
			imgUploadClick() {
				// 自定义拍照
				project.cameraCustom({
					type: 'none', // 拍照类型： none-无拍照蒙层  portrait-头像拍照  IDCard-身份证拍照
					size: 'middle', // 生成图片尺寸： low-小尺寸  middle-中等尺寸  high-大尺寸
					album: true, // 是否开启相册选图
					success: (photoD) => {
						// 本地图片路径 赋值
						this.inputInfo.image = photoD.path;
					},
				});
			},
			
			// 确定按钮 点击
			sendBtnClick() {
				/* // 检测是否填写项目
				if (!this.inputInfo.project)
				{
					uni.showToast({
						title: '请选择所属项目',
						icon: 'none',
						duration: 2500
					});
				} */
				// 检测是否填写单位
				if (!this.inputInfo.company)
				{
					uni.showToast({
						title: '请选择工作单位',
						icon: 'none',
						duration: 2500
					});
				}
				// 检测是否选择图片
				else if (!this.inputInfo.image)
				{
					uni.showToast({
						title: '请拍摄现场照片',
						icon: 'none',
						duration: 2500
					});
				}
				// 都通过
				else {
					// 进行图片上传
					this.imgUploadReq(()=>{
						// 创建学习组
						this.creatGroupReq();
					});
				}
			},
			
			
			// =============================================== 接口请求
			// 获取个人信息
			userInfoGetReq() {
				request_user.userInfoGet({
					success: (res) => {
						// 初始信息 填写
						this.inputInfo.project = res.info.project ? res.info.project : ''; // 所在项目
						this.inputInfo.company = res.info.company ? res.info.company : ''; // 工作单位
					},
				});
			},
			
			// 图片上传
			imgUploadReq(callback) {
				request_user.imgUpload({
					data: {
						file: this.inputInfo.image, // 文件资源地址
					},
					success: (res) => {
						// 图片上传信息 赋值
						this.imageUp.id = res.id;
						this.imageUp.url = res.url;
						// 成功回调
						if (callback) { callback(); }
					},
				});
			},
			
			// 创建学习组
			creatGroupReq() {
				request.creatGroup({
					data: {
						project: this.inputInfo.project, // 项目名称
						work_unit: this.inputInfo.company, // 单位名称
						scene_img: this.imageUp.url, // 现场照url
					},
					success: (res) => {
						// 成功提示
						uni.showToast({
							title: '创建成功',
							icon: 'success',
							duration: 1000,
							mask: true
						});
						// 延时返回上一页
						this.timer.autoBack = setTimeout(()=>{
							// 返回上一页
							uni.navigateBack();
						}, 1000);
					},
				});
			},
			
		},
		
	}
</script>